<template>
  <div class="car-detail-page">
    <div class="page-header">
      <h1>车辆详细信息</h1>
      <div class="header-actions">
        <button @click="goBack" class="back-button">返回</button>
      </div>
    </div>
    
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else class="car-details">
      <div class="detail-group">
        <h2>{{ carData.brand }} - {{ carData.config }}</h2>
      </div>
      
      <div class="detail-group">
        <h3>基本信息</h3>
        <div class="detail-item">
          <span class="label">品牌:</span>
          <span class="value">{{ carData.brand }}</span>
        </div>
        <div class="detail-item">
          <span class="label">配置:</span>
          <span class="value">{{ carData.config }}</span>
        </div>
      </div>
      
      <div class="detail-group">
        <h3>价格信息</h3>
        <div class="detail-item">
          <span class="label">指导价:</span>
          <span class="value">{{ carData.guidePrice }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">近期优惠:</span>
          <span class="value">{{ carData.recentDiscount }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">裸车价格:</span>
          <span class="value">{{ carData.nakedCarPrice }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">保险费用:</span>
          <span class="value">{{ carData.insuranceFee }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">购置税:</span>
          <span class="value">{{ carData.purchaseTax }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">上牌费用:</span>
          <span class="value">{{ carData.licenseFee }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">全款落地:</span>
          <span class="value">{{ carData.fullPrice }}元</span>
        </div>
      </div>
      
      <div class="detail-group">
        <h3>贷款信息</h3>
        <div class="detail-item">
          <span class="label">首付:</span>
          <span class="value">{{ carData.downPayment }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">贷款金额:</span>
          <span class="value">{{ carData.loanAmount }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">贷款年期:</span>
          <span class="value">{{ carData.loanTerm }}年</span>
        </div>
        <div class="detail-item">
          <span class="label">年利率:</span>
          <span class="value">{{ carData.interestRate }}%</span>
        </div>
        <div class="detail-item">
          <span class="label">每月还款额:</span>
          <span class="value">{{ carData.monthlyPayment }}元</span>
        </div>
        <div class="detail-item">
          <span class="label">总利息:</span>
          <span class="value">{{ carData.totalInterest }}元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBrandByName, getConfigByBrandAndName } from '@/services/api';

export default {
  name: 'CarDetailView',
  data() {
    return {
      carData: {
        brand: '',
        config: '',
        guidePrice: '',
        recentDiscount: '',
        nakedCarPrice: '',
        insuranceFee: '',
        purchaseTax: '',
        licenseFee: '',
        fullPrice: '',
        downPayment: '',
        loanAmount: '',
        loanTerm: '',
        interestRate: '',
        monthlyPayment: '',
        totalInterest: ''
      },
      loading: false
    };
  },
  async mounted() {
    await this.loadCar();
  },
  methods: {
    async loadCar() {
      this.loading = true;
      try {
        const brandName = this.$route.params.brandName;
        const configName = this.$route.params.configName;
        
        // 获取品牌信息
        const brandResponse = await getBrandByName(brandName);
        const brand = brandResponse.data;
        
        // 获取配置信息
        const configResponse = await getConfigByBrandAndName(brandName, configName);
        const config = configResponse.data;
        
        // 填充详情数据
        this.carData = {
          brand: brand.name,
          config: config.name,
          guidePrice: config.guidePrice,
          recentDiscount: config.recentDiscount,
          nakedCarPrice: config.nakedCarPrice,
          insuranceFee: config.insuranceFee,
          purchaseTax: config.purchaseTax,
          licenseFee: config.licenseFee,
          fullPrice: config.fullPrice,
          downPayment: config.downPayment,
          loanAmount: config.loanAmount,
          loanTerm: config.loanTerm,
          interestRate: config.interestRate,
          monthlyPayment: config.monthlyPayment,
          totalInterest: config.totalInterest
        };
      } catch (error) {
        console.error('加载车辆信息失败:', error);
      } finally {
        this.loading = false;
      }
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.car-detail-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h1 {
  color: #2c3e50;
  margin: 0;
}

.back-button {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.back-button:hover {
  background-color: #5a6268;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.car-details {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 30px;
}

.detail-group {
  margin-bottom: 30px;
}

.detail-group h2 {
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

.detail-group h3 {
  color: #2c3e50;
  border-bottom: 2px solid #f0f0f0;
  padding-bottom: 10px;
  margin-top: 0;
}

.detail-item {
  display: flex;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item .label {
  font-weight: bold;
  color: #2c3e50;
  width: 120px;
  text-align: right;
  margin-right: 20px;
}

.detail-item .value {
  flex: 1;
  color: #666;
}
</style>